window.addEventListener('load', function () {
  // 1.获取按钮
  var prev = document.querySelector('.prev')
  var next = document.querySelector('.next')
  var bander = document.querySelector('.bander')
  bander.addEventListener('mouseenter', function () {
    prev.style.display = 'block'
    next.style.display = 'block'
    clearInterval(timer)
    timer = null
  })
  bander.addEventListener('mouseleave', function () {
    prev.style.display = 'none'
    next.style.display = 'none'
    timer = setInterval(function () {
      // 手动调用点击事件
      next.click()
    }, 2000)
  })
  var ul = bander.querySelector('ul')
  var ol = bander.querySelector('.count')
  for (var i = 0; i < ul.children.length; i++) {
    // 创建一个li
    var li = document.createElement('li')
    // 记录当前圆圈的索引号
    li.setAttribute('index', i)
    // 把li插入到ol里面
    ol.appendChild(li)
    // 4.圆圈排他思想，在生成li时绑定事件
    li.addEventListener('click', function () {
      // 干掉所有人
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = ''
      }
      // 留下我自己
      this.className = 'active'
      // 5.点击圆圈，移动图片：移动的是ul
      // ul的移动距离：圆圈的索引号 * 图片的宽度  注意：是负值
      // 点击圆圈时，获取它的索引值
      var index = this.getAttribute('index')
      // 当点击li时，把li的索引号给num
      num = index
      circle = index
      animate(ul, -index * 1925)
    })
  }
  // 把ol里面的第一个li选中，设置类名为aticve
  ol.children[0].classList = 'active'
  // 克隆第一张图片，放到ul最后面
  var first = ul.children[0].cloneNode(true)
  ul.appendChild(first)
  // 7.点击右侧按钮，图片滚动一张
  var num = 0
  var circle = 0
  // flag节流阀
  var flag = true
  prev.addEventListener('click', function () {
    if (flag) {
      flag = false // 关闭节流阀
      if (num == 0) {
        num = ol.children.length
        ul.style.left = -num * 1925 + 'px'
      }
      num--
      animate(ul, -num * 1925, function () {
        flag = true
      })
      // 如果circle==ol.children.length
      // if (circle == 0) {
      //   circle = ol.children.length
      // }
      circle == circle < 0 ? (circle = ol.children.length) : circle
      circle--
      // 调用函数
      circleChange()
    }
  })
  next.addEventListener('click', function () {
    if (flag) {
      flag = false
      if (num == ol.children.length) {
        ul.style.left = 0
        num = 0
      }
      num++
      animate(ul, -num * 1925, function () {
        flag = true
      })
      // 8.点击按钮，圆圈一起变化
      circle++
      // 如果circle==ol.children.length
      if (circle == ol.children.length) {
        circle = 0
      }
      // 调用函数
      circleChange()
    }
  })
  function circleChange() {
    // 清除其他圆圈的current
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = ''
    }
    // 留下自己的current
    ol.children[circle].className = 'active'
  }
  // 自动播放轮播图
  var timer = setInterval(function () {
    // 手动调用点击事件
    next.click()
  }, 2000)
  // 回到顶部
  function topShow() {
    // 四舍五入取滚动条的值
    var top = Math.round($(document).scrollTop())
    if (top >= 500) {
      $('.toTop').fadeIn(200)
    } else {
      $('.toTop').fadeOut(200)
    }
  }
  topShow()
  $(window).scroll(function () {
    topShow()
  })
  $('.toTop').click(function () {
    $(document).scrollTop(0)
  })
})
